<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="discountChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-table :data="tableData" style="width: 100%; margin-top: 10px">
      <el-table-column label="优惠券名称" prop="coupon_name" />
      <el-table-column label="状态" prop="use_status">
        <template slot-scope="scoped">
          <div v-if="scoped.row.use_status == 'N'">未使用</div>
          <div v-else>已使用</div>
        </template>
      </el-table-column>
      <el-table-column label="获取时间" prop="updated_at" />
    </el-table>
  </div>
</template>

<script>
  //
  import { cusCoupon } from '@/api/customer'

  export default {
    components: {},
    props: {
      cusid: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        tableData: [],
        options: [
          {
            value: 'N',
            label: '未使用',
          },
          {
            value: 'Y',
            label: '已使用',
          },
          {
            value: 'k',
            label: '全部',
          },
        ],
        value: '全部',
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      init() {
        const data = {
          cus_id: this.cusid,
        }
        cusCoupon(data).then((e) => {
          this.tableData = e.data
        })
      },
      discountChange(e) {
        if (e != 'k') {
          const data = {
            cus_id: this.cusid,
            use_status: e,
          }
          cusCoupon(data).then((e) => {
            this.tableData = e.data
          })
        } else {
          this.init()
        }
      },
    },
  }
</script>

<style></style>
